import React, { Component } from 'react';

import './index.scss';

export default class TableBody extends Component {

    render() {

        const { recomBookData, onStatusClick } = this.props;

        return (
            <tbody>
                {
                    recomBookData && recomBookData.map((item, index) => {
                        return (
                            <tr key={index}>
                                {/* <td> { item.bid }  </td> */}

                                <td className="recom-book-name">
                                   {item.bookTitle}
                                </td>

                                <td>
                                    <img
                                        className="recom-book-img"
                                        src={`http://gcimg.mvvm.xyz/${item.imgKey}`}
                                        alt={item.title}
                                    />
                                </td>

                                <td>{item.author}</td>

                                <td>
                                    <span className={item.price === '0' ? 'free' : 'price'}>
                                        {item.price === '0' ? '免费' : `￥${item.price}`}
                                    </span>
                                </td>

                                <td>{item.readCount}</td>

                                <td className="copyright" >
                                    <div className="copyright-item">{item.copyright}</div>
                                </td>

                                <td>
                                    <button
                                        className={['btn', item.status ? 'btn-danger' : 'btn-success'].join(' ')}
                                        onClick={() => onStatusClick(item.bid, index)}
                                    >
                                        {item.status ? '下架' : '上架'}
                                    </button>
                                </td>
                            </tr>
                        );
                    })
                }
            </tbody>
        );
    }
}